<template>
  <div class="header">
    <div class="left">图书管理系统Vue</div>
    <div class="right">
      <span>{{userStore.user.username}}</span>
      <!-- 设置图标，下拉菜单 -->
      <div class="setting">
        <el-dropdown>
           <el-icon size="30px"><setting /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="editPassDialogVisible=true"><el-icon><lock /></el-icon>修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout"><el-icon><switch-button /></el-icon>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

  <!-- 修改密码的对话框 -->
  <el-dialog v-model="editPassDialogVisible" title="修改密码" width="30%" @close="handleEditClose">
    <!-- 表单区域 -->
    <el-form ref="editPassFormRef" :model="editPassForm" :rules="editPassRules" label-width="140px">
      <el-form-item label="请输入新密码" prop="newpassword">
        <el-input v-model="editPassForm.newpassword"/>
      </el-form-item>
      <el-form-item label="请确认新密码" prop="checkpassword">
        <el-input v-model="editPassForm.checkpassword" @keypress.enter="editPass(editPassFormRef)"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editPassDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editPass(editPassFormRef)">确认</el-button >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { messageApi, } from '@/api/global.js'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/userStore'
import { reactive, ref } from 'vue-demi'
import { changePass } from '@/network/user.js'

const userStore = useUserStore()
const router = useRouter()

const editPassDialogVisible = ref(false)    // 控制修改对话框的显示和隐藏
const editPassFormRef = ref(null)   // 修改密码表单的引用
// 修改密码的表单数据
const editPassForm = reactive({  
  id: userStore.user.id,
  newpassword: '',
  checkpassword: ''
})
// 修改密码表单的规则
const editPassRules = reactive({
  newpassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 3, max: 16, message: '密码的长度在3~16个字符之间', trigger: 'blur' }
  ],
  checkpassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 3, max: 16, message: '密码的长度在3~16个字符之间', trigger: 'blur' }
  ],
})

// 修改密码
const editPass = async (formRef) => {
  await formRef.validate( async valid => {
    if (!valid) return
    if (editPassForm.newpassword !== editPassForm.checkpassword) return messageApi('error', '两次密码不一致！')
    const {data: res} = await changePass(editPassForm)
    if (res.code !== 200) return messageApi('error', res.msg)
    messageApi('success', res.msg)
    editPassDialogVisible.value = false
  })

}

// 监听修改密码对话框的关闭事件
const handleEditClose = () => {
  editPassFormRef.value.resetFields()
}

// 退出
const logout = async () => {
  try{
    await ElMessageBox.confirm( '确认退出吗？', '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
    window.localStorage.removeItem('user')
    window.localStorage.removeItem('token')
    messageApi('success', '退出成功！')
    router.replace('/login')
  }catch(e) {
    messageApi('info', '已取消')
  }
}

</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 60px;
  background: #333744;
  display: flex;
  justify-content: space-between;
  // font-family: '正楷';
  .left {
    margin-left: 35px;
    line-height: 60px;
    font-size: 23px;
    font-weight: 700;
    color: #f1f1f1eb;
    letter-spacing: 2px;
  }
  .right {
    display: flex;
    margin-right: 50px;
    .el-icon {
      color: #f1f1f1eb;
      line-height: 65px;
      // margin-left: 30px;
      margin-top: 16px;
      cursor: pointer;
    }
    span {
      line-height: 60px;
      font-size: 21px;
      font-weight: 700;
      color: #f1f1f1eb;
      padding-right: 20px;
    }
    .anticon {
      font-size: 24px;
      color: #f1f1f1eb;

    }
  }
}
</style>